<template>
  <div>
    <div>
      <!-- 面包屑导航 -->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>买家信息管理</el-breadcrumb-item>
      </el-breadcrumb>
      <!-- 搜索筛选 -->
      <el-form :inline="true" :model="formInline" class="user-search">
        <el-form-item label="搜索：">
          <el-input size="small" v-model="formInline.id" placeholder="输入买家编号"></el-input>
        </el-form-item>
        <el-form-item label="">
          <el-input size="small" v-model="formInline.realname" placeholder="输入真实姓名"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
          <el-button size="small" type="primary" icon="el-icon-plus" @click="add()">添加</el-button>
        </el-form-item>
      </el-form>
      <!--列表-->
      <el-table size="small" :data="listData" highlight-current-row v-loading="loading" border
                element-loading-text="拼命加载中" style="width: 100%;">
        <el-table-column align="center" type="selection" width="60"></el-table-column>
        <!--<el-table-column prop="id" label="编号" width="50px"></el-table-column>-->
        <el-table-column label="编号">
          <template slot-scope="scope">
            {{scope.$index+1}}
          </template>
        </el-table-column>
        <el-table-column prop="loginname" label="买家名称" sortable></el-table-column>
        <el-table-column prop="password" label="买家密码"></el-table-column>
        <el-table-column prop="realname" label="真实姓名"></el-table-column>
        <el-table-column prop="gender" label="性别" sortable></el-table-column>
        <el-table-column prop="email" label="电子邮箱" sortable></el-table-column>
        <el-table-column prop="mobile" label="联系方式"></el-table-column>
        <el-table-column prop="address" label="联系地址"></el-table-column>
        <el-table-column prop="role" label="权限状态">
          <template slot-scope="scope">
            <p v-if="listData[scope.$index].role==1" style="font-family: 华文楷体;font-weight: bold"><el-tag :type="'success'">管理员</el-tag></p>
            <p v-else style="font-family: 华文楷体;font-weight: bold"><el-tag :type="'primary'">普通买家</el-tag></p>
          </template>
        </el-table-column>
        <el-table-column prop="sfjy" label="禁用状态">
          <template slot-scope="scope">
            <el-switch v-model="listData[scope.$index].sfjy==0?true:false" @change="sfjySwitch(scope.$index, scope.row)"></el-switch>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" min-width="60">
          <template slot-scope="scope">
            <!--<el-button size="mini" @click="update(scope.$index, scope.row)">编辑</el-button>-->
            <el-button size="mini" type="danger" @click="deleteUser(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 新增模态框界面 -->
      <el-dialog :title="addTitle" :visible.sync="addFormVisible" width="30%" @click="closeDialog">
        <el-form ref="addForm" :model="addForm" label-width="80px" :rules="rules">

          <el-form-item label="买家编号" prop="id" v-show="false">
            <el-input size="small" v-model="addForm.id" auto-complete="off" placeholder="请输入接单名称" disabled></el-input>
          </el-form-item>

          <el-form-item label="买家名称" prop="loginname">
            <el-input size="small" v-model="addForm.loginname" auto-complete="off" placeholder="请输入买家名称"></el-input>
          </el-form-item>

          <el-form-item label="买家密码" prop="password">
            <el-input size="small" v-model="addForm.password" auto-complete="off" placeholder="请输入买家密码"></el-input>
          </el-form-item>

          <el-form-item label="真实姓名" prop="realname">
            <el-input size="small" v-model="addForm.realname" auto-complete="off" placeholder="请输入真实姓名"></el-input>
          </el-form-item>

          <el-form-item label="性别" prop="gender">
            <el-select v-model="addForm.gender" placeholder="请选择">
              <el-option key="男" value="男" ></el-option>
              <el-option key="女" value="女" ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="电子邮箱" prop="email">
            <el-input size="small" v-model="addForm.email" auto-complete="off" placeholder="请输入电子邮箱"></el-input>
          </el-form-item>

          <el-form-item label="联系方式" prop="mobile">
            <el-input size="small" v-model="addForm.mobile" auto-complete="off" placeholder="请输入联系方式"></el-input>
          </el-form-item>

          <el-form-item label="联系地址" prop="mobile">
            <el-input size="small" v-model="addForm.address" auto-complete="off" placeholder="请输入联系地址"></el-input>
          </el-form-item>

          <el-form-item label="权限状态" prop="role">
            <el-select v-model="addForm.role" placeholder="请选择">
              <el-option key="卖家" value="卖家" >卖家</el-option>
              <el-option key="买家" value="买家" >买家</el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="删除状态" prop="sczt" v-show="false">
            <el-input size="small" v-model="addForm.sczt" auto-complete="off" placeholder="请输入接单名称"></el-input>
          </el-form-item>

        </el-form>

        <div slot="footer" class="dialog-footer">
          <el-button size="small" @click="closeDialog">取消</el-button>
          <el-button size="small" type="primary" :loading="loading" class="title"
                     @click="addSave()">保存
          </el-button>
        </div>

      </el-dialog>
    </div>
  </div>
</template>

<script>
    export default {
        data() {
            return {
                nshow: true, //switch开启
                fshow: false, //switch关闭
                loading: false, //是显示加载
                addFormVisible: false, //控制编辑页面显示与隐藏
                addFormVisible: false, //控制编辑页面显示与隐藏

                addTitle: '添加',
                addForm: {
                    id: '',
                    loginname: '',
                    password: '',
                    realname: '',
                    gender: '女',
                    email: '',
                    mobile: '',
                    address: '',
                    role: '买家',
                    sczt: 0,
                },

                // rules表单验证
                rules: {
                    id: [{required: true, message: '请输入买家名称', trigger: 'blur'}],
                    loginname: [{required: true, message: '请输入登录名称', trigger: 'blur'}],
                    password: [{required: true, message: '请输入登录密码', trigger: 'blur'}],
                    realname: [{required: true, message: '请输入真实姓名', trigger: 'blur'}],
                    gender: [{required: true, message: '请输入性别', trigger: 'blur'}],
                    email: [{required: true, message: '请输入电子邮箱', trigger: 'blur'}],
                    mobile: [{required: true, message: '请输入联系方式', trigger: 'blur'}],
                    role: [{required: true, message: '请输入权限', trigger: 'blur'}],
                    sczt: [{required: true, message: '请输入审核状态', trigger: 'blur'}]
                },
                formInline: {
                    id: '',
                    title: '',
                },
                // 删除部门
                seletedata: {
                    ids: '',
                    token: localStorage.getItem('logintoken')
                },
                userparm: [], //搜索权限
                listData: [], //买家数据
                // 分页参数
                pageparm: {
                    currentPage: 1,
                    pageSize: 10,
                    total: 10
                }
            }
        },
        /**
         * 创建完毕
         */
        created() {
            this.getdata(this.formInline)
        },

        /**
         * 里面的方法只有被调用才会执行
         */
        methods: {
            // 获取公司列表
            getdata() {
                // 表格加载开始
                // this.loading = true
                const _this = this;

                let res;
                axios.get(localStorage.getItem("globalUrl") + "login/findAllByRole3").then(function(resp){
                    for(let i = 0 ;i <resp.data.data.length;i++){
                        // resp.data.data[i].createtime = _this.formatDate(resp.data.data[i].createtime);

                        // resp.data.data[i].identi = (resp.data.data[i].identi==''||resp.data.data[i].identi==null)?'暂无标识':resp.data.data[i].identi;

                        // resp.data.data[i].sczt = (resp.data.data[i].sczt==0)?'未审核':'已审核';
                    }
                    _this.listData = resp.data.data;

                    // 表格加载结束
                    _this.loading = false
                });


            },

            filterTag(value, row) {
                return row.tag === value;
            },

            // 搜索事件
            search() {
                const _this = this;
                axios.post(localStorage.getItem("globalUrl") + "login/findAllByRole3ByIdAndStatus",this.formInline).then(function(resp){

                    _this.listData = resp.data.data;

                    // 表格加载结束
                    _this.loading = false
                });

            },
            //信息增加监听
            add: function () {
                this.addFormVisible = true;
            },
            //信息新增
            addSave(){
                // this.addForm =
                const _this = this;
                this.addForm.role = (this.addForm.role=='管理员')?1:2;
                axios.post(localStorage.getItem("globalUrl") + "login/add",this.addForm).then(function(){

                    axios.get(localStorage.getItem("globalUrl") + "login/findAllByRole3").then(function(resp){
                        _this.listData = resp.data.data;

                        _this.$message({
                            type: 'success',
                            message: '新增成功!'
                        });

                        // 表格加载结束
                        _this.loading = false
                    });
                    _this.addFormVisible = false; //控制编辑页面显示与隐藏

                });



            },

            // 删除公司
            deleteUser(index, row) {
                this.$confirm('确定要删除吗?', '信息', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {

                    const _this = this;

                    axios.delete(localStorage.getItem("globalUrl") + 'login/delete?id='+row.id).then(function(){
                        axios.get(localStorage.getItem("globalUrl") + "login/findAllByRole3").then(function(resp){
                            _this.listData = resp.data.data;

                            _this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });

                            // 表格加载结束
                            _this.loading = false
                        });
                    })

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    })

                })
            },
            // 关闭编辑、增加弹出框
            closeDialog() {
                this.addFormVisible = false
            },
            //直接修改switch是否禁用状态
            sfjySwitch(index, row){
                const _this = this;

                row.sfjy = row.sfjy==1?0:1;

                axios.put(localStorage.getItem("globalUrl") + "login/update",row).then(function(resp){

                    if(resp.data.data.sfjy){
                        _this.$message({
                            type: 'info',
                            message: '已禁用 '+resp.data.data.realname+' 账户'
                        })
                    }else{
                        _this.$message({
                            type: 'success',
                            message: '已解除 '+resp.data.data.realname+' 账户禁用'
                        })
                    }

                });
            }
        }
    }
</script>

<style scoped>
  .user-search {
    margin-top: 20px;
  }
</style>